<%+cbi/valueheader%>
<textarea id="cbid.openclash.config.clog" class="cbi-input-textarea" style="width: 100%;display:inline" data-update="change" rows="32" cols="60" readonly="readonly" > </textarea>
<fieldset class="cbi-section">
	<table width="100%">
		<tr>
			<td width="25%" align="center">
				<input type="button" class="btn cbi-button cbi-button-apply" id="stop_refresh_button" value="<%:Stop Refresh Log%>" onclick=" return stop_refresh() "/>
			</td>
			<td width="25%" align="center">
				<input type="button" class="btn cbi-button cbi-button-apply" id="start_refresh_button" value="<%:Start Refresh Log%>" onclick=" return start_refresh() "/>
			</td>
			<td width="25%" align="center">
				<input type="button" class="btn cbi-button cbi-button-apply" id="del_log_button" value="<%:Clean Log%>" style=" display:inline;" onclick=" return del_log() " />
			</td>
			<td width="25%" align="center">
				<input type="button" class="btn cbi-button cbi-button-apply" id="down_log_button" value="<%:Download Log%>" style=" display:inline;" onclick=" return download_log() " />
			</td>
		</tr>
	</table>
</fieldset>

<script type="text/javascript">//<![CDATA[
var r;
var log_len = 0;
var lv = document.getElementById('cbid.openclash.config.clog');

function stop_refresh() {
	clearTimeout(r);
	return
}

function start_refresh() {
	clearTimeout(r);
	r=setTimeout("poll_log()",1000*2);
	return
}

function createAndDownloadFile(fileName, content) {
    var aTag = document.createElement('a');
    var blob = new Blob([content]);
    aTag.download = fileName;
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
}
function download_log(){
	var lv = document.getElementById('cbid.openclash.config.clog');
	var dt = new Date();
	var timestamp = dt.getFullYear()+"-"+(dt.getMonth()+1)+"-"+dt.getDate()+"-"+dt.getHours()+"-"+dt.getMinutes()+"-"+dt.getSeconds();
	createAndDownloadFile("OpenClash-"+timestamp+".log",lv.innerHTML)
	return
}

function del_log() {
	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "del_log")%>',null,function(x, data){
		lv.innerHTML="";
		log_len = 0;
	}
		);
	return
}

function p(s) {
	return s < 10 ? '0' + s: s;
}

function line_tolocal(str){
	var strt=new Array();
	str.trim().split('\n').forEach(function(v, i) {
	var regex = /"([^"]*)"/g;
	var res = regex.exec(v);
	if (res) {
		var dt = new Date(res[1].match(/\+08\:00/)? res[1].replace("+08:00", "Z") : res[1]);
	}
	if (dt && dt != "Invalid Date"){
	  strt[i]=dt.getFullYear()+"-"+p(dt.getMonth()+1)+"-"+p(dt.getDate())+" "+p(dt.getHours())+":"+p(dt.getMinutes())+":"+p(dt.getSeconds())+v.substring(res[1].length + 7);
	}else{
	  strt[i]=v;}})
	return strt
}

function poll_log(){
XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "refresh_log")%>', {log_len: log_len},
	function(x, status) {
		if ( x && x.status == 200 ) {
			if (x.responseText && lv) {
				log_len = x.responseText.split("\n")[0];
				var lines = line_tolocal(x.responseText.replace(/.*/, "").substr(1));
				if (lines != null && lines != "") {
					lv.innerHTML = lines.reverse().join('\n')+'\n'+lv.innerHTML;
					//lv.innerHTML = x.responseText.split('\n').reverse().join('\n')+lv.innerHTML;
				}
			}
		}
	}
);
	r=setTimeout("poll_log()",1000*2);
}
poll_log();
//]]>
</script>
<%+cbi/valuefooter%>
